<template>
  <div class="visualization_first">
    <div class="left"></div>
    <div class="center">
      <div class="a">
        <div class="one">
          <p>
            访客情况监测（月度） <span><a href="#">更多></a></span>
          </p>
          <div class="one_box">
            <img
              src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E9%A9%BE%E9%A9%B6%E8%88%B1/u5439.svg"
              alt="" />
            <img
              src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E9%A9%BE%E9%A9%B6%E8%88%B1/u5440.svg"
              alt="" />
            <div>
              <p>21625</p>
              <p>访客数量统计（人次）</p>
            </div>
          </div>
          <div class="two_box">
            <div class="name">
              <p>A1幢写字楼</p>
              <p>A2幢写字楼</p>
              <p>A3幢写字楼</p>
              <p>B2幢写字楼</p>
              <p>B1幢写字楼</p>
            </div>
            <el-row id="main" style="position: absolute; top: 45px; left: 150px"></el-row>
            <div class="num">
              <p>98%</p>
              <p>88%</p>
              <p>65%</p>
              <p>55%</p>
              <p>48%</p>
            </div>
          </div>
          <div class="kuang">企业访客活跃度排行</div>
        </div>
        <div class="two">
          <p>园区产业分布</p>
          <div class="two_box">
            <div class="wai">
              <div class="li">产业分布</div>
            </div>
            <div class="name1">
              <div>
                <div class="quan1"></div>
                第一产业<span>234.3</span>
              </div>
              <div>
                <div class="quan2"></div>
                第二产业<span>234.3</span>
              </div>
              <div>
                <div class="quan3"></div>
                第三产业<span>234.3</span>
              </div>
            </div>
          </div>
        </div>
        <div class="three">
          <p>物业费收款情况</p>
          <el-row id="main1" style="width: 450px; height: 260px"></el-row>
          <span>单位/万元</span>
        </div>
      </div>
      <div class="b">
        <div class="b1">
          <p>当前园区总收入</p>
          <p><span>15,092,346</span>元</p>
        </div>
        <div class="b2">
          <span>单位/万元</span>
          <div class="biao">资金收入趋势图</div>
          <el-row id="main2" style="width: 700px; height: 270px;"></el-row>
        </div>
      </div>
      <div class="c">
        <div class="c1">
          <p class="p1">园区能耗排行（月度）</p>
          <el-table :data="tableData" height="220" style="width: 300px; background-color: aquamarine" class="table"
            :header-cell-style="{
              background: 'transparent',
              color: '#027db4',
              borderBottem: '5px solid #027db4',
            }">
            <el-table-column prop="date" label="区域" width="100" />
            <el-table-column prop="name" label="总电量" width="120" />
            <el-table-column prop="address" label="功率因数" />
          </el-table>
          <div class="c3">
            <p>
              实时监控画面 <span><a href="#">更多></a></span>
            </p>
            <div>
              <img src="@/assets/u5546.png" alt="" srcset="" />
            </div>
          </div>
          <div class="c4">
            <p class="p1">设备故障监测</p>
            <span>单位/次</span>
            <el-row id="main3" style="width: 400px; height: 250px"></el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted,onBeforeUnmount } from "vue";
const tableData = [
  {
    date: "西北区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
  {
    date: "西南区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
  {
    date: "东西区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
  {
    date: "华北区域",
    name: "12000/kW.h",
    address: "84.5%",
  },
  {
    date: "苏皖区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
  {
    date: "东西区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
  {
    date: "华北区域",
    name: "12000/kW.h",
    address: "84.5%",
  },
  {
    date: "苏皖区域",
    name: "12000/kW.h",
    address: "85.5%",
  },
];
//echars图表
var  myChart:any = null;
onMounted(() => {
  var option2 = {
    tooltip: {},
    xAxis: {
      data: ["2019-02", "2019-03", "2019-04", "2019-05", "2019-06", "2019-07"],
      axisLine: {
        show: false, //是否显示x轴线
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      axisLabel: {
        color: "white", //标记颜色
      },
    },
    yAxis: {
      min: 0,
      max: 1800,
      axisLine: {
        show: true, //是否显示y轴线
      },
      axisLabel: {
        color: "white", //标记颜色
      },
      splitLine: {
        //分割线
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674", //分割线类型
        },
        show: true, //是否显示分割线
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        data: [800, 1100, 910, 1250, 1100, 1500],
        itemStyle: {
          normal: {
            color: "#0b9ca8",
            lineStyle: {
              color: "#0b9ca8",
            },
          },
        },
      },
    ],
  };
  var option1 = {
    tooltip: {},
    xAxis: {
      data: ["11/19", "11/20", "11/22", "11/23", "11/24", "11/26", "11/28", ""],
      axisLine: {
        show: false, //是否显示x轴线
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      splitLine: {
        show: true,
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674", //分割线类型
        },
      },
      axisLabel: {
        color: "#6699ff", //标记颜色
      },
    },
    yAxis: {
      splitLine: {
        //分割线
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674", //分割线类型
        },
        show: true, //是否显示分割线
      },
      axisLabel: {
        color: "#6699ff", //标记颜色
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        data: [100, 200, 688, 851, 650, 160, 300, 200],
      },
    ],
  };
  var main:any =  document.getElementById("main")
  myChart = echarts.init(main);
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ["", "", "", "", ""],
      axisTick: {
        show: false, //是否显示短标记
      },
      axisLine: {
        show: false, //是否显示x轴线
      },
    },
    yAxis: {
      axisLine: {
        show: false, //是否显示y轴线
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      splitLine: {
        //分割线
        show: false, //是否显示分割线
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "10",
        showBackground: true,
        data: [0.98, 0.88, 0.65, 0.55, 0.48],
        itemStyle: {
          color: function (params: any) {
            const colorList = [
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
              ["rgb(205, 204, 153)", "rgb(254, 154, 2)"],
              ["rgb(205, 204, 153)", "rgb(254, 154, 2)"],
            ];
            const colorItem = colorList[params.dataIndex];
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
            // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: colorItem[0],
              },
              {
                offset: 1,
                color: colorItem[1],
              },
            ],
              false
            );
          },
        },
      },
    ],
  });
  var main1:any =   document.getElementById("main1")
  myChart = echarts.init(main1);
  myChart.setOption(option1);
  var  main2:any =  document.getElementById("main2")
  myChart = echarts.init(main2);
  myChart.setOption(option2);
  var  main3:any =  document.getElementById("main3")
  myChart = echarts.init(main3);
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ["11/20", "11/21", "11/22", "11/23", "11/24", "11/25", "11/26"],
      axisTick: {
        show: false, //是否显示短标记
      },
      axisLabel: {
        color: "#6699ff", //标记颜色
      },
    },
    yAxis: {
      axisLabel: {
        color: "white", //标记颜色
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      splitLine: {
        //分割线
        lineStyle: {
          //分割线样式
          type: "solid",
          color: "#375674", //分割线类型
        },
        show: true, //是否显示分割线
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "20",
        data: [200, 400, 800, 1000, 800, 400, 200],
        itemStyle: {
          //柱状条样式

          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //颜色(渐变色)
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "white",
                fontSize: 12,
              },
            },
          },
        },
      },
    ],
  });
});
onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 
</script>
<style scoped>
.el-table {
  --el-table-tr-bg-color: rgba(0, 0, 0, 0);
  --el-table-border: none;
  --el-table-text-color: white;
  --el-table-border-color: none;
  --el-table-row-hover-bg-color: none;
}

.table {
  margin-left: 35px;
  margin-top: 25px;
  width: 400px;
  height: 250px;
  background-color: transparent !important;
  background: transparent;
}

.center .c .c4 {
  width: 400px;
  height: 270px;
  border: 1px solid #027db4;
  margin-top: 5px;
  border-radius: 10px;
  position: relative;
}

.center .c .c4 span {
  position: absolute;
  color: white;
  font-size: 10px;
  top: 60px;
}

.center .c .c3 {
  width: 400px;
  height: 220px;
  border: 1px solid #027db4;
  border-radius: 10px;
  margin-top: 25px;
}

.center .c .c3 p span a {
  float: right;
  padding-right: 25px;
  color: #027db4;
  text-decoration: none;
}

.center .c .c3 div {
  width: 300px;
  height: 150px;
  border: 1px solid #027db4;
  margin: 0 auto;
  margin-top: 10px;
}

.center .c .c3 div img {
  width: 100%;
  height: 100%;
}

.center .c .c3 p {
  border-left: 5px solid #027db4;
  margin-top: 15px;
  color: white;
  margin-left: 15px;
  padding-left: 15px;
}

.center .c {
  height: 100%;
  width: 400px;
}

.center .c .c1 {
  height: 300px;
  border: 1px solid #027db4;
  border-radius: 10px;
  margin-top: 5px;
  width: 400px;
}

.center .c .c1 .p1 {
  color: white;
  border-left: 5px solid #027db4;
  margin-left: 15px;
  margin-top: 15px;
  padding-left: 15px;
}

.center .b {
  flex: 1;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.center .b .b1 {
  height: 150px;
  width: 100%;
  border: 1px solid #027db4;
  border-radius: 10px;
}

.center .b .b2 {
  height: 280px;
  border: 1px solid #027db4;
  border-radius: 10px;
  position: relative;
}

.center .b .b2 .biao {
  position: absolute;
  border: 2px solid #027db4;
  font-size: 12px;
  text-align: center;
  width: 150px;
  height: 45px;
  color: #036cdf;
  line-height: 45px;
  border-radius: 15px;
  left: 40%;
  top: -22px;
  background-color: #132534;
  -webkit-box-shadow: inset 0px 0px 10px #027db4;
  -moz-box-shadow: inset 0px 0px 10px #027db4;
  box-shadow: inset 0px 0px 10px #027db4;
}

.center .b .b2 span {
  position: absolute;
  color: white;
  font-size: 12px;
  right: 85px;
  top: 35px;
}

.center .b .b1 p:nth-child(1) {
  color: #027db4;
  margin-left: 50px;
  margin-top: 25px;
  font-weight: 900;
}

.center .b .b1 p:nth-child(2) {
  margin-left: 50px;
  margin-top: 25px;
  font-weight: 900;
  color: #027db4;
  font-size: 20px;
}

.center .b .b1 span {
  font-size: 50px;
}

.center .three {
  width: 450px;
  height: 280px;
  border: 1px solid #027db4;
  color: white;
  border-radius: 10px;
  padding: 25px 25px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}

.center .three span {
  position: absolute;
  top: 60px;
  font-size: 14px;
}

.center .two .two_box .wai {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-left: 1px solid red;
  border-top: 1px solid green;
  border-bottom: 1px solid orange;
  margin-top: 15px;
}

.center .two .two_box .name1 {
  width: 200px;
  height: 100px;
  margin-left: 15px;
  margin-top: 15px;
  color: #4e5972;
  font-size: 14px;
}

.center .two .two_box .name1 span {
  margin-left: 15px;
  color: white;
}

.two_box .name1>div {
  display: flex;
  margin-bottom: 15px;
}

.center .two .two_box .name1 .quan1 {
  width: 20px;
  height: 20px;
  border: 1px solid green;
  border-radius: 50%;
  margin-right: 10px;
}

.center .two .two_box .name1 .quan2 {
  width: 20px;
  height: 20px;
  border: 1px solid red;
  border-radius: 50%;
  margin-right: 10px;
}

.center .two .two_box .name1 .quan3 {
  width: 20px;
  height: 20px;
  border: 1px solid #027db4;
  border-radius: 50%;
  margin-right: 10px;
}

.center .two .two_box .li {
  width: 80px;
  height: 80px;
  border: 1px solid gray;
  text-align: center;
  line-height: 80px;
  border-radius: 50px;
  color: gray;
  margin-top: 8px;
  margin-left: 8px;
}

.center .two .two_box {
  display: flex;
}

.visualization_first {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
}

.left {
  height: 100%;
  width: 3%;
  background: url(@/assets/u5426.png) 0 75px;
}

.center {
  height: 100%;
  width: 94%;
  background: url(@/assets/bg.png) no-repeat;
  position: relative;
  display: flex;
}

.center .one {
  width: 450px;
  height: 320px;
  border: 1px solid #027db4;
  color: white;
  border-radius: 10px;
  padding: 25px 25px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}

.center .two {
  width: 450px;
  height: 200px;
  border: 1px solid #027db4;
  color: white;
  border-radius: 10px;
  padding: 25px 25px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}

.center .one>p,
.center .two>p,
.center .three>p {
  border-left: 5px solid #027db4;
  padding-left: 15px;
  color: white;
}

.center .one .one_box {
  margin-top: 15px;
}

.center .one .two_box #main {
  transform: rotate(90deg);
  width: 200px;
  height: 300px;
}

.center .one .two_box {
  display: flex;
  height: 150px;
}

.center .one .two_box .name {
  line-height: 32px;
  font-size: 14px;
  margin-left: 25px;
}

.center .one .two_box .num {
  margin-left: 240px;
  font-size: 14px;
  line-height: 32px;
}

.center .one .kuang {
  height: 40px;
  width: 450px;
  border: 1px solid #027db4;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 10px;
  color: #4e5972;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}

.center .one .one_box img:first-child {
  margin-left: 50px;
}

.center .one .one_box>div {
  width: 280px;
  float: right;
  color: #027db4;
}

.center .one .one_box>div p:first-child {
  font-size: 25px;
}

.center .one p span {
  color: #027db4;
  float: right;
}

.center .one p span a {
  text-decoration: none;
  color: #027db4;
}

.right {
  width: 3%;
  height: 100%;
  background: url(@/assets/u5425.png) 0 75px;
}
</style>
